<template>
  <div class="contact">
    <!-- 轮播图区域 -->
    <div class="carousel-banner" v-if="carouselData.length > 0">
      <el-carousel
        height="400px"
        :autoplay="true"
        :interval="5000"
        arrow="never"
        indicator-position="none"
      >
        <el-carousel-item v-for="(item, index) in carouselData" :key="index">
          <div
            class="carousel-item"
            :style="{ backgroundImage: `url(${item.image})` }"
          >
            <div class="carousel-overlay">
              <div class="container">
                <div class="carousel-content">
                  <h1 class="carousel-title">{{ item.title }}</h1>
                  <p class="carousel-subtitle" v-if="item.subtitle">
                    {{ item.subtitle }}
                  </p>
                  <p class="carousel-description" v-if="item.description">
                    {{ item.description }}
                  </p>
                  <el-button
                    v-if="item.buttonText"
                    type="primary"
                    size="large"
                    @click="handleCarouselAction(item.action)"
                  >
                    {{ item.buttonText }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 页面标题（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">联系我们</h1>
        <p class="page-subtitle">
          如果您有任何问题和建议，欢迎随时与我们取得联系！
        </p>
      </div>
    </div>

    <div class="container">
      <!-- 联系方式 -->
      <section class="contact-section">
        <h2 class="section-title">联系方式</h2>
        <div class="contact-intro">
          <p class="contact-description-text">
            如果您有任何问题和建议，欢迎随时与我们取得联系！
          </p>
          <p class="contact-note">联系方式（微信同号）</p>
        </div>
        <div class="contact-grid">
          <div
            class="contact-item"
            v-for="item in contactMethods"
            :key="item.id"
          >
            <div class="contact-icon">
              <el-icon><component :is="getIconComponent(item.icon)" /></el-icon>
            </div>
            <div class="contact-info">
              <h3>{{ item.title }}</h3>
              <p>{{ item.value }}</p>
              <span class="contact-description">{{ item.description }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 办公地址 -->
      <section class="contact-section">
        <h2 class="section-title">办公地址</h2>
        <div class="office-info">
          <div class="office-map">
            <div
              id="map"
              style="
                width: 100%;
                height: 400px;
                border-radius: 12px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              "
            ></div>
          </div>
          <div class="office-details">
            <h3>{{ contact.company }}</h3>
            <div class="address-info">
              <p v-if="contact.address">
                <span class="contact-icon iconfont icon-dizhi"></span>
                <strong>地址：</strong>{{ contact.address }}
              </p>
              <p v-if="contact.phone">
                <span class="contact-icon iconfont icon-dianhua"></span>
                <strong>电话：</strong>{{ contact.phone }}
              </p>
              <p v-if="contact.email">
                <span class="contact-icon iconfont icon-youxiang"></span>
                <strong>邮箱：</strong>{{ contact.email }}
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { Phone, Message, Location, Clock } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { subpageApi } from "@/api/user";
import "@/assets/icons/iconfont.css";

export default {
  name: "Contact",
  setup() {
    // 联系信息数据
    const contact = ref({
      company: "",
      phone: "",
      email: "",
      address: "",
      workTime: "",
    });

    // 轮播图数据
    const carouselData = ref([]);

    // 联系方式数据
    const contactMethods = ref([]);

    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType("carousel_contacts");
        if (response && response.code === "200" && response.data) {
          carouselData.value = response.data
            .filter((item) => item.status === "active")
            .map((item) => {
              const content =
                typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content;
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || "",
                description: content.description || "",
                image: item.imageUrl || content.image || "",
                buttonText: content.buttonText || "",
                action: content.action || "",
              };
            })
            .sort((a, b) => a.sort - b.sort);
          console.log("轮播图数据加载成功:", carouselData.value);
        }
      } catch (error) {
        console.error("加载轮播图数据失败:", error);
      }
    };

    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action && action.type === "link" && action.url) {
        window.open(action.url, "_blank");
      }
    };

    // 获取图标组件
    const getIconComponent = (iconName) => {
      const iconMap = {
        Phone: Phone,
        Message: Message,
        Location: Location,
        Clock: Clock,
      };
      return iconMap[iconName] || Phone;
    };

    // 加载联系信息
    const loadContactInfo = async () => {
      try {
        const info = await request.get("/site/info");
        if (info && (info.code === "200" || info.code === 200)) {
          contact.value = Object.assign(contact.value, info.data || {});
        } else {
          // 兼容旧接口，仅联系信息
          const data = await request.get("/site/contact");
          if (data && (data.code === "200" || data.code === 200)) {
            contact.value = Object.assign(contact.value, data.data || {});
          }
        }
        // 拉取联系人公开数据
        const contactsRes = await request.get("/site/contacts");
        if (
          contactsRes &&
          (contactsRes.code === "200" || contactsRes.code === 200)
        ) {
          const mapTypeToTitle = (t) =>
            ({
              exhibitor: "参展联系",
              visitor: "观展联系",
              activity: "活动联系",
              sponsor: "赞助联系",
              media: "媒体联系",
            }[t] || t);
          contactMethods.value = (contactsRes.data || []).map((c, idx) => ({
            id: c.id || idx + 1,
            title: mapTypeToTitle(c.type),
            value: `${c.name} ${c.phone}`,
            description: c.description || "",
            icon: "Phone",
          }));
        }
      } catch (e) {
        console.error("加载联系信息失败:", e);
      }
    };

    // 百度地图相关函数
    let map = null;

    // 创建和初始化地图函数
    const initMap = () => {
      createMap(); // 创建地图
      setMapEvent(); // 设置地图事件
      addMapControl(); // 向地图添加控件
      addMapOverlay(); // 向地图添加覆盖物
    };

    const createMap = () => {
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(114.003149, 22.600308), 14);

      // 设置地图样式
      map.setMapStyle({
        styleJson: [
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#46bcec",
              visibility: "on",
            },
          },
          {
            featureType: "land",
            elementType: "all",
            stylers: {
              color: "#f2f2f2",
            },
          },
          {
            featureType: "road",
            elementType: "all",
            stylers: {
              color: "#ffffff",
            },
          },
          {
            featureType: "highway",
            elementType: "all",
            stylers: {
              color: "#fad459",
            },
          },
          {
            featureType: "arterial",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "local",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "poi",
            elementType: "labels",
            stylers: {
              visibility: "off",
            },
          },
          {
            featureType: "poi",
            elementType: "geometry",
            stylers: {
              color: "#f5f5f5",
            },
          },
        ],
      });
    };

    const setMapEvent = () => {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    };

    const addClickHandler = (target, window) => {
      target.addEventListener("click", function () {
        target.openInfoWindow(window);
      });
    };

    const addMapOverlay = () => {
      const markers = [
        {
          content: `
            <div style="
              padding: 15px; 
              font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
              background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
              border-radius: 10px;
              box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
              border: 1px solid rgba(102, 126, 234, 0.2);
              min-width: 220px;
              max-width: 280px;
            ">
              <div style="
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                padding-bottom: 10px;
                border-bottom: 1px solid rgba(102, 126, 234, 0.1);
              ">
                <div style="
                  width: 32px;
                  height: 32px;
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-right: 10px;
                  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
                ">
                  <span style="color: white; font-size: 14px; font-weight: bold;">机</span>
                </div>
                <div>
                  <h4 style="
                    margin: 0 0 2px 0; 
                    color: #333; 
                    font-size: 16px; 
                    font-weight: 700;
                    line-height: 1.2;
                  ">深圳市机器人协会</h4>
                  <p style="
                    margin: 0; 
                    color: #667eea; 
                    font-size: 11px; 
                    font-weight: 500;
                  ">Shenzhen Robotics Association</p>
                </div>
              </div>
              
              <div style="margin-bottom: 12px;">
                <div style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 6px;
                  color: #555;
                  font-size: 12px;
                ">
                  <span style="
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-right: 6px;
                    flex-shrink: 0;
                    font-family: 'iconfont';
                    font-size: 14px;
                    color: #667eea;
                    text-align: center;
                    line-height: 14px;
                  " class="iconfont icon-dizhi"></span>
                  <span style="font-weight: 500;">地址：</span>
                  <span style="margin-left: 4px;">深圳市南山区科技园</span>
                </div>
                
                <div style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 6px;
                  color: #555;
                  font-size: 12px;
                ">
                  <span style="
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-right: 6px;
                    flex-shrink: 0;
                    font-family: 'iconfont';
                    font-size: 14px;
                    color: #667eea;
                    text-align: center;
                    line-height: 14px;
                  " class="iconfont icon-dianhua"></span>
                  <span style="font-weight: 500;">电话：</span>
                  <span style="margin-left: 4px;">0755-12345678</span>
                </div>
                
                <div style="
                  display: flex;
                  align-items: center;
                  color: #555;
                  font-size: 12px;
                ">
                  <span style="
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    margin-right: 6px;
                    flex-shrink: 0;
                    font-family: 'iconfont';
                    font-size: 14px;
                    color: #667eea;
                    text-align: center;
                    line-height: 14px;
                  " class="iconfont icon-youxiang"></span>
                  <span style="font-weight: 500;">邮箱：</span>
                  <span style="margin-left: 4px;">info@szrobot.org</span>
                </div>
              </div>
              
              <div style="
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
                padding: 8px;
                border-radius: 6px;
                text-align: center;
                border: 1px solid rgba(102, 126, 234, 0.2);
              ">
                <p style="
                  margin: 0; 
                  color: #667eea; 
                  font-size: 12px; 
                  font-weight: 600;
                  line-height: 1.3;
                ">🤖 欢迎来到机器人产业盛会！</p>
              </div>
            </div>
          `,
          title: "深圳市机器人协会",
          position: { lat: 22.600525, lng: 113.997993 },
        },
      ];

      for (let index = 0; index < markers.length; index++) {
        const point = new BMap.Point(
          markers[index].position.lng,
          markers[index].position.lat
        );

        // 创建自定义图标
        const icon = new BMap.Icon(
          "data:image/svg+xml;base64," +
            btoa(`
          <svg width="32" height="40" viewBox="0 0 32 40" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
              </linearGradient>
            </defs>
            <path d="M16 0C7.163 0 0 7.163 0 16c0 8.837 7.163 16 16 16s16-7.163 16-16C32 7.163 24.837 0 16 0z" fill="url(#grad1)"/>
            <circle cx="16" cy="16" r="8" fill="white"/>
            <path d="M16 8c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z" fill="#667eea"/>
            <path d="M16 12c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4z" fill="white"/>
          </svg>
        `),
          new BMap.Size(32, 40),
          {
            anchor: new BMap.Size(16, 40),
          }
        );

        const marker = new BMap.Marker(point, { icon: icon });

        // 创建自定义标签
        const label = new BMap.Label(markers[index].title, {
          offset: new BMap.Size(20, -10),
          position: point,
        });
        label.setStyle({
          backgroundColor: "rgba(102, 126, 234, 0.9)",
          color: "white",
          border: "none",
          borderRadius: "15px",
          padding: "6px 12px",
          fontSize: "12px",
          fontWeight: "500",
          boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
          whiteSpace: "nowrap",
        });

        const opts = {
          width: 0,
          height: 0,
          title: markers[index].title,
          enableMessage: false,
          offset: new BMap.Size(0, -60),
        };
        const infoWindow = new BMap.InfoWindow(markers[index].content, opts);

        marker.setLabel(label);
        addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
      }
    };

    // 向地图添加控件
    const addMapControl = () => {
      const scaleControl = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      });
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      const navControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(navControl);
      const overviewControl = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: true,
      });
      map.addControl(overviewControl);
    };

    // 加载百度地图API
    const loadBaiduMap = () => {
      return new Promise((resolve, reject) => {
        if (window.BMap) {
          resolve();
          return;
        }

        const script = document.createElement("script");
        script.src =
          "http://api.map.baidu.com/api?v=2.0&ak=U6zO9XqBbz6mTw1t6L12oAU5x1hjniJ4&callback=initBaiduMap";
        script.onerror = reject;

        window.initBaiduMap = () => {
          resolve();
          delete window.initBaiduMap;
        };

        document.head.appendChild(script);
      });
    };

    // 组件挂载时加载数据
    onMounted(async () => {
      loadContactInfo();
      loadCarouselData();

      // 加载百度地图
      try {
        await loadBaiduMap();
        // 延迟初始化地图，确保DOM已渲染
        setTimeout(() => {
          initMap();
        }, 100);
      } catch (error) {
        console.error("加载百度地图失败:", error);
      }
    });

    return {
      contact,
      contactMethods,
      carouselData,
      handleCarouselAction,
      getIconComponent,
    };
  },
};
</script>

<style scoped>
.contact {
  min-height: 100vh;
  background: #f8f9fa;
  /* padding-top: 70px; */
}

/* 轮播图样式 */
.carousel-banner {
  margin-top: 0;
}

.carousel-item {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  /* padding-top: 130px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-content {
  text-align: left;
  color: white;
  max-width: 100%;
}

.carousel-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-subtitle {
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-description {
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.8;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.contact-section {
  padding: 60px 0;
  margin-bottom: 40px;
}

.map-section {
  padding: 60px 0;
}

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.contact-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border-radius: 2px;
}

/* 联系方式样式 */
.contact-intro {
  text-align: center;
  margin-bottom: 40px;
}

.contact-description-text {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.contact-note {
  font-size: 1rem;
  color: var(--e-global-color-title);
  font-weight: 500;
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-5px);
}

.contact-icon {
  font-size: 2.5rem;
  color: var(--e-global-color-selected);
  flex-shrink: 0;
}

.contact-info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.contact-info p {
  font-size: 1.1rem;
  color: var(--e-global-color-selected);
  font-weight: 500;
  margin-bottom: 5px;
}

.contact-description {
  color: #666;
  font-size: 0.9rem;
}

/* 联系表单样式 */
.contact-form {
  max-width: 800px;
  margin: 0 auto;
}

.inquiry-form {
  background: #f8f9fa;
  padding: 40px;
  border-radius: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.submit-btn {
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 100%;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

/* 办公地址样式 */
.office-info {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 70px;
  align-items: start;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 60px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  /* margin: 0 -30px; */
}

.office-map {
  width: 100%;
}

.office-map #map {
  width: 100%;
  height: 700px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.office-map #map:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.office-map #map::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 16px;
}

.office-details {
  background: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.office-details h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  position: relative;
  padding-left: 20px;
}

.office-details h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border-radius: 2px;
}

.address-info p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 15px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.address-info p .contact-icon {
  margin-right: 8px;
  font-size: 16px;
  color: var(--e-global-color-selected);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.address-info p strong {
  color: #333;
  font-weight: 600;
  margin-right: 8px;
  min-width: 60px;
}

.office-hours {
  margin-top: 35px;
  padding-top: 25px;
  border-top: 2px solid rgba(102, 126, 234, 0.1);
}

.office-hours h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.office-hours h4::before {
  content: "🕒";
  margin-right: 8px;
  font-size: 1.2rem;
}

.office-hours p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 8px;
  font-size: 1rem;
}

/* 常见问题样式 */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #667eea;
}

.faq-question h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.faq-icon {
  font-size: 1.2rem;
  color: #667eea;
  transition: transform 0.3s ease;
}

.faq-icon-rotated {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 0 20px 0;
}

.faq-answer p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .contact-section {
    padding: 20px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .office-info {
    padding: 10px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .inquiry-form {
    padding: 20px;
  }

  .office-details {
    padding: 12px;
  }
}
</style>
